<template>
    <div>
        <br>
        <!-- 添加 -->
        <el-row :gutter="20" class="Carousel-Info">
            <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
                <el-button type="primary" @click="addVisible = true">新增企业账号</el-button>
            </el-col>
        </el-row>
        <br>
        <el-dialog
        title="增加企业"
        :visible.sync="addVisible"
        width="30%"
        :before-close="handleAddClose">
            <el-form label-width="80px">
                <el-form-item label="Hr姓名">
                    <el-input v-model="company.hrName" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item label="登录名">
                    <el-input v-model="company.username" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="company.password" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item label="公司名称">
                    <el-input v-model="company.companyName" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item label="公司介绍">
                    <el-input v-model="company.companyDesc" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="company.phone" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="company.email" placeholder="请输入内容"></el-input>
                </el-form-item>

                <el-form-item label="是否上市">
                    <el-select v-model="company.beListed" placeholder="选择是否上市">
                        <el-option
                        v-for="beListed in beListedOptions"
                        :key="beListed.value"
                        :label="beListed.label"
                        :value="beListed.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="公司规模">
                    <el-select v-model="company.scaleId" placeholder="选择公司规模">
                        <el-option
                        v-for="scale in scaleOptions"
                        :key="scale.id"
                        :label="scale.scaleName"
                        :value="scale.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="企业类型">
                    <el-select v-model="company.industryId" placeholder="选择企业类型">
                        <el-option
                        v-for="industry in industryOptions"
                        :key="industry.id"
                        :label="industry.industryName"
                        :value="industry.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <!-- <el-form-item label="审核资料">
                    <el-upload
                        class="upload-demo"
                        action="http://localhost/company/upload"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        multiple
                        :limit="3"
                        :on-exceed="handleExceed"
                        :file-list="fileList"
                        :on-success="success">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item> -->

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="addVisible = false; add()">确 定</el-button>
            </span>
        </el-dialog>
        <el-row class="Carousel-list">
            <el-col :span="24">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="企业ID" width="200"></el-table-column>
            <el-table-column prop="hrName" label="HR姓名"></el-table-column>
            <el-table-column prop="companyName" label="公司名称"></el-table-column>
            <el-table-column prop="phone" label="电话"></el-table-column>
            <el-table-column prop="email" label="邮箱"></el-table-column>
            <el-table-column prop="beListed" label="是否上市">
                <template mplate slot-scope="scope">{{ scope.row.beListed | getType}}</template>
            </el-table-column>
            <el-table-column prop="scale.scaleName" label="公司规模"></el-table-column>
            <el-table-column prop="industry.industryName" label="企业类型"></el-table-column>
            <el-table-column label="操作" >
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="updateVisible = true; listById(scope.row.id);">修改</el-button>
                    <el-dialog
                    title="修改企业信息"
                    :visible.sync="updateVisible"
                    width="30%"
                    :before-close="handleUpdateClose">
                        <el-form label-width="80px">
                            <el-form-item label="企业ID">
                                <el-input v-model="company.id" placeholder="请输入内容" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="Hr姓名">
                                <el-input v-model="company.hrName" placeholder="请输入内容"></el-input>
                            </el-form-item>
                            <el-form-item label="公司名称">
                                <el-input v-model="company.companyName" placeholder="请输入内容"></el-input>
                            </el-form-item>
                            <el-form-item label="电话">
                                <el-input v-model="company.phone" placeholder="请输入内容"></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱">
                                <el-input v-model="company.email" placeholder="请输入内容"></el-input>
                            </el-form-item>
                            <!-- <el-form-item label="是否上市">
                                <el-input v-model="company.beListed" placeholder="请输入内容"></el-input>
                            </el-form-item> -->
                            <el-form-item label="上市状态">
                    <el-select v-model="company.beListed" placeholder="选择是否上市">
                        <el-option
                        v-for="beListed in beListedOptions"
                        :key="beListed.value"
                        :label="beListed.label"
                        :value="beListed.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="updateVisible = false">取 消</el-button>
                            <el-button type="primary" @click="updateVisibleChange();update()">确 定</el-button>
                        </span>
                    </el-dialog>
                    <el-popconfirm 
                    confirm-button-text='确认' 
                    cancel-button-text='取消' 
                    icon="el-icon-info" 
                    icon-color="red" 
                    title="确定删除吗？"
                    @confirm="confirm(scope.row.id)"
                    >
                        <el-button >删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </el-col>
        </el-row>
        <div class="block">
            <el-pagination
                layout="prev, pager, next"
                :total="pageHelp.total*10"
                @current-change="changeCurrentPage"
                >
            </el-pagination>
        </div>
        
    </div>
    
</template>

<script>
let identity = ''
import axios from 'axios'
export default {
    data() {
        return {
            tableData: [],
            visible: false,
            updateVisible: false,
            addVisible:false,
            company:{},
            pageHelp:{
                currentPage : 1,
                perPageSize : 10
            },
            fileList: [],
            beListedOptions: [{
                value: '1',
                label: '未上市'
            }, {
                value: '2',
                label: '上市'
            }, {
                value: '3',
                label: '未知'
            }],
            scaleOptions: [],
            industryOptions: []
        }
    },
    components:{
        
    },
    filters: {
        getType(val) {
            if(val == 1){
                return val = "未上市";
            }else if(val == 2){
                return val = "上市";
            }else if(val == 3){
                return val = "未知";
            }
            return val = "值异常";
        }
    },

    methods: {

        warningMessage(info) {
            this.$message({
                message: info,
                type: 'warning'//success、warning
            });
        },
        successMessage(info) {
            this.$message({
                message: info,
                type: 'success'//success、warning
            });
        },
        errorMessage(info) {
            this.$message.error(info);
        },
        updateVisibleTF(val){
            this.updateVisible=val;
        },

        // 删除
        confirm(id){
            axios({
                method:'DELETE',
                url:"http://localhost/backstage/company/"+id,
                headers:{
                    id: JSON.parse(localStorage.getItem("account")).id,
                    token: JSON.parse(localStorage.getItem("account")).token,
                }
            }).then(res => {
                if(res.data.code === 20100){
                    this.list();
                }else{
                    alert("删除失败")
                }
            }).catch(error => {
                console.log(error);
            })
            
        },

        // 查询全部
        list(){
            axios({
                method: 'post',
                url:"http://localhost/backstage/company/listPassedCompany",
                headers:{
                    id: JSON.parse(localStorage.getItem("account")).id,
                    token: JSON.parse(localStorage.getItem("account")).token,
                },
                data:this.pageHelp
            }).then(res => {
                console.log(res.data);
                if(res.data.code == 500){
                    alert("您的权限不足")
                }else if(res.data.code === 40100){
                    console.log(res.data.data.list);
                    this.tableData = res.data.data.list
                    this.pageHelp.total = res.data.data.pages
                }else{
                    alert("查询失败")
                }
                
            }).catch(error => {
                console.log(error);
            })
        },

        //分页查询
        changeCurrentPage(currentPage){
            console.log(this.pageHelp.currentPage);
            this.pageHelp.currentPage = currentPage;
            axios({
                method: 'post',
                url:"http://localhost/backstage/company/listPassedCompany",
                headers:{
                    id: JSON.parse(localStorage.getItem("account")).id,
                    token: JSON.parse(localStorage.getItem("account")).token,
                },
                data:this.pageHelp
            }).then(res => {
                console.log(res.data);
                if(res.data.code == 500){
                    alert("您的权限不足")
                }else if(res.data.code === 40100){
                    this.tableData = res.data.data.list
                    this.pageHelp.total = res.data.data.pages
                }else{
                    alert("查询失败")
                }
                
            }).catch(error => {
                console.log(error);
            })
        },

        //查询企业规模类型列表
        listAllScale(){
            axios({
                method: 'get',
                url:"http://localhost/scale",
                headers:{
                    id: JSON.parse(localStorage.getItem("account")).id,
                    token: JSON.parse(localStorage.getItem("account")).token,
                },
            }).then(res => {
                console.log(res);
                this.scaleOptions = res.data.data
            }).catch(error => {
                console.log(error);
            })
        },

        //查询企业行业类型列表
        listAllIndustry(){
            axios({
                method: 'get',
                url:"http://localhost/industry",
                headers:{
                    id: JSON.parse(localStorage.getItem("account")).id,
                    token: JSON.parse(localStorage.getItem("account")).token,
                },
            }).then(res => {
                console.log(res);
                this.industryOptions = res.data.data
            }).catch(error => {
                console.log(error);
            })
        },

        handleUpdateClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    //关闭后将company对象清空
                    // this.company = null;
                    done();
                })
                .catch(_ => {});
        },
        handleAddClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    //关闭后将company对象清空
                    // this.company = null;
                    done();
                })
                .catch(_ => {});
        },

        updateVisibleChange(){
            this.updateVisible = false
        },

        // 查询单个
        listById(id){
            axios({
                method:'GET',
                url:"http://localhost/backstage/company/"+id,
                headers:{
                    id: JSON.parse(localStorage.getItem("account")).id,
                    token: JSON.parse(localStorage.getItem("account")).token,
                }
            }).then(res => {
                console.log(res.data.data);
                this.company = res.data.data
            }).catch(error => {
                console.log(error);
            })
        },

        // 更新企业信息
        update(){
            axios({
                method:'PUT',
                url:"http://localhost/backstage/company/company",
                data: this.company,
                headers:{
                    id: JSON.parse(localStorage.getItem("account")).id,
                    token: JSON.parse(localStorage.getItem("account")).token,
                }
            }).then(res => {
                console.log(res.data);
                if(res.data.code === 500){
                    this.warningMessage("您未有权限！")
                    // alert("您的权限不足")
                }else if(res.data.code === 30100){
                    this.list();
                    
                    this.successMessage("更新成功！");
                }else{
                    this.errorMessage("更新失败！")
                    // alert("更新失败")
                }
            }).catch(error => {
                console.log(error);
            })
        },
        // 新增
        add(){
            axios({
                method:'POST',
                url:"http://localhost/backstage/company/company",
                data: this.company,
                headers:{
                    id: JSON.parse(localStorage.getItem("account")).id,
                    token: JSON.parse(localStorage.getItem("account")).token,
                }
            }).then(res => {
                if(res.data.code == 500){
                    this.warningMessage("您未有权限！")
                    // alert("您未有权限");
                }else if(res.data.code == 10100){
                    // this.company = null;
                    this.list();
                    this.successMessage("新增成功！");
                }else{
                    this.errorMessage("新增失败");
                    // alert("新增失败");
                }
            }).catch(error => {
                console.log(error);
            })
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file.response);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
        },
        //上传图片成功的函数
        success(response, file, fileList){
            console.log(response);
            this.company.qualification = response;
        }
    },
    created(){
        this.list(),
        this.listAllScale(),
        this.listAllIndustry()
    },
    watch:{
        // updateVisible(newValue,oldValue){
        //     // alert(1)
        //     if(newValue == false){
        //         // alert(2)
        //         this.company = null;
        //     }
        // }
    },
}
</script>

<style scoped>
.Carousel-list{
    width: 100%;
    margin-bottom: 20px;
}

</style>